<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">详情</el-button>
    <el-dialog
      v-if="this.data"
      title="参数详情"
      :visible.sync="dialogVisible"
      width="70%">
      <el-table
        :data="this.data"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="name"
          label="名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="options"
          label="参数"
          sortable
          width="180">
          <template v-slot="scope">
            <span v-for="(item, index) in scope.row.options" :key="index">
              <el-tag style="margin: 3px">{{ item.name }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="selectCount"
          label="可选数量">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      required: false,
      default: undefined
    }
  },
  data() {
    return {
      dialogVisible: false,
      data: undefined
    }
  },
  created() {
    this.data = this.value.data
  }
}
</script>
